<script setup lang="ts">
import BuyerShowItem from './BuyerShowItem.vue'
import { getBuyShowTags_l, getBuyShowList_l } from "@/api/lidare"
import type { tagsType, BuyShowItemType } from "@/type/lidare"
import { ref, onMounted, watch } from "vue";

const all = ref<HTMLElement>();

const tags = ref<Array<tagsType>>([]);
const active = ref('');
const buyShowList = ref<Array<BuyShowItemType>>([]);
const page = ref(-1);
watch(active, async () => {
  page.value = 0;
  let res = await getBuyShowList_l(active.value, page.value);
  buyShowList.value = [...res.data._data.showEvaluateList];
  all.value!.scrollTop = 0;
});
onMounted(async () => {
  let res = await getBuyShowTags_l();
  tags.value = res.data._data.adList;
  active.value = tags.value[0].content;
});
const loading = ref(false);
const finished = ref(false);
const onLoad = async () => {
  page.value++;
  let res = await getBuyShowList_l(active.value, page.value);
  buyShowList.value = [...buyShowList.value, ...res.data._data.showEvaluateList];
  loading.value = false;
}
</script>
<template>
  <div class="buy-show" :ref="el => (all = el as HTMLElement)">
    <header class="tags">
      <div class="tags-item" :class="{ active: active == tag.content }" @click.stop="active = tag.content"
        v-for="(tag, index) in tags" :key="index">{{ tag.content }}</div>
    </header>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="video-list">
        <BuyerShowItem v-for="(item, index) in buyShowList" :key="item.id" :item="item" />
      </div>
    </van-list>
  </div>
</template>
<style lang="scss" scoped>
.buy-show {
  width: 100%;
  height: calc(100vh - 1rem);
  box-sizing: border-box;
  padding: .1rem;
  background-color: var(--bgc-gray);
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .tags {
    position: sticky;
    left: 0;
    top: -.1rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: .1rem 0;
    padding-bottom: 0;
    background-color: inherit;

    .tags-item {
      padding: 0 .15rem;
      height: .3rem;
      line-height: .3rem;
      border-radius: .04rem;
      font-size: .15rem;
      color: var(--text-black);
      background-color: var(--bgc-white);
      margin-right: .1rem;
      margin-bottom: .1rem;
      transition: .3s;
    }

    .active {
      color: var(--text-white);
      background-color: var(--bgc-red);
    }
  }
}
</style>